<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + " ://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<jsp:include page="root_public.jsp"/>
<title>添加角色 - 角色管理</title>
</head>

<body>
<div class="x-body">
    <form class="layui-form">
        <div class="layui-form-item">
            <label for="name" class="layui-form-label">
                <span class="x-red">*</span>角色名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="name" name="name" required="" lay-verify="names"
                       autocomplete="off" value="admin" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="ename" class="layui-form-label">
                <span class="x-red">*</span>英文名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="ename" name="ename" required="" lay-verify="ename"
                       autocomplete="off" value="admin" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否可见</label>
            <div class="layui-input-block">
                <input type="checkbox" checked="" name="isShow" lay-skin="switch" lay-filter="switchTest"
                       lay-text="no|off" value="1">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="remarks" class="layui-form-label">
                描述
            </label>
            <div class="layui-input-inline">
                <input type="text" id="remarks" name="remarks"
                       autocomplete="off" value="admin" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="position:absolute;top: -1000px;">
            <div class="layui-input-inline">
                <input type="text" id="useable" name="useable"
                       autocomplete="off" value="1" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="x-red">*</span>权限</label>
            <div class="layui-input-block ruleList">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
            </label>
            <a class="layui-btn submitBtn">
                增加
            </a>
        </div>
    </form>
</div>
<script>

    layui.use(['form', 'layer'], function () {

        $ = layui.jquery;
        var form = layui.form, layer = layui.layer;

        /*
        * 获取权限列表
        * */
        $.ajax({
            type: "post",
            url: "<%=path%>/menu/findList",
            async: true,
            dataType: "json",
            success: function (data) {
                var $ruleList = $('.ruleList');
                var datas = data.data.menuList;
                for (var i = 0; i < datas.length; i++) {
                    var datass = datas[i];
                    var $html =
                        $('<input type="checkbox" name="menuList" value="' + datass.id + '" lay-skin="primary" title="' +
                            datass.name + '">');
                    $ruleList.append($html);
                    form.render();
                }
            }
        });

        /*
        * 增加角色按钮
        * */
        $('.submitBtn').click(function () {
            var menuLists = new Array();
            $('input[name="menuList"]:checked').each(function (index) {
                menuLists.push({"id": $(this).val()});
            });
            var role = {};
            role.name = $('#name').val();
            role.ename = $('#ename').val();
            role.useable = $('#useable').val();
            role.menuList = menuLists;
            $.ajax({
                type: "post",
                url: "<%=path%>/role/save",
                async: true,
                dataType: 'json',
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify(role)
                ,
                success: function (data) {
                    parent.findLists();
                    var index = parent.layer.getFrameIndex(window.name);
                    //关闭当前frame
                    parent.layer.close(index);
                    //发异步，把数据提交给php
                    parent.layer.msg("增加成功", {icon: 6, time: 600});
                }
            });
        });


        //监听指定开关
        form.on('switch(switchTest)', function (data) {
        });


        //自定义验证规则
        form.verify({
            names: function (value) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '角色名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '角色名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '角色名不能全为数字';
                }
                if (value.length < 2) {
                    return '角色名不能小于2位';
                }
                if (value.length > 8) {
                    return '角色名不能大于8位';
                }
            },
            ename: function (value) {
                if (!/^[a-zA-Z]+$/.test(value)) {
                    return '英文名只能是英文';
                }
                if (value.length < 4) {
                    return '英文名不能小于4位';
                }
                if (value.length > 24) {
                    return '英文名不能大于24位';
                }
            },
        });
    });
</script>

</body>

</html>